{%  extends 'base/base.html' %}
{% block link %}
  <link rel="stylesheet" href="../../static/css/base/side.css">
  <link rel="stylesheet" href="../../static/css/news/search.css">
{% endblock %}
{% block main_contain %}
  <main id="main">
           <div class="w1200 clearfix">
               <!-- main-contain start  -->
               <div class="main-contain ">
                   <!-- search-box start -->
                   <div class="search-box">
                       <form action="" style="display: inline-flex;">

                           <input type="search" placeholder="请输入要搜索的内容" name="q" class="search-control">


                           <input type="submit" value="搜索" class="search-btn">
                       </form>
                       <!-- 可以用浮动 垂直对齐 以及 flex  -->
                   </div>
                   <!-- search-box end -->
                   <!-- content start -->
                   <div class="content">
                       <!-- search-list start -->
                      {% if not show_all %}
                       <!-- search-list end -->
                        <div class="search-result-list">
                            <h2 class="search-result-title">
                              搜索结果 <span style="font-weight: 700;color: #ff6620;">{{ paginator.num_pages }}</span>页
                            </h2>
                            <ul class="news-list">
                              {# 导入自带高亮功能 #}
                              {% load highlight %}
                              {% for one_news in page.object_list %}
                                <li class="news-item clearfix">
                                  <a href="{% url 'news:news_detail' one_news.id %}" class="news-thumbnail" target="_blank">
                                  <img src="{{ one_news.object.image_url }}">
                                  </a>
                                  <div class="news-content">
                                    <h4 class="news-title">
                                      <a href="{% url 'news:news_detail' one_news.id %}">
                                        {% highlight one_news.title with query %}
                                      </a>
                                    </h4>
                                    <p class="news-details">{{ one_news.digest }}</p>
                                    <div class="news-other">
                                      <span class="news-type">{{ one_news.object.tag.name }}</span>
                                      <span class="news-time">{{ one_news.object.update_time }}</span>
                                      <span
                                          class="news-author">{% highlight one_news.object.author.username with query %}

                                      </span>
                                    </div>
                                  </div>
                                </li>
                              {% endfor %}


                            </ul>
                          </div>
                       <!-- news-contain start -->
                      {% else %}
                       <div class="news-contain">
                           <div class="hot-recommend-list">
                               <h2 class="hot-recommend-title">热门推荐</h2>
                               <ul class="news-list">

                                   {% for one_hotnews in page.object_list %}

                                  <li class="news-item clearfix">
                                    <a href="#" class="news-thumbnail">
                                      <img src="{{ one_hotnews.news.image_url }}">
                                    </a>
                                    <div class="news-content">
                                      <h4 class="news-title">
                                        <a href="{% url 'news:news_detail' one_hotnews.news.id %}">{{ one_hotnews.news.title }}</a>
                                      </h4>
                                      <p class="news-details">{{ one_hotnews.news.digest }}</p>
                                      <div class="news-other">
                                        <span class="news-type">{{ one_hotnews.news.tag.name }}</span>
                                        <span class="news-time">{{ one_hotnews.update_time }}</span>
                                        <span class="news-author">{{ one_hotnews.news.author.username }}</span>
                                      </div>
                                    </div>
                                  </li>

                                {% endfor %}


                               </ul>
                           </div>
                       </div>
                        {% endif %}
                      {# 分页导航 #}
                     <div class="page-box" id="pages">
                       <div class="pagebar" id="pageBar">
                          <a class="a1">{{ page.paginator.count }}条</a>
                         {# 上一页的URL地址 #}
                         {% if page.has_previous %}
                           {% if query %}
                             <a href="{% url 'news:search' %}?q={{ query }}&amp;page={{ page.previous_page_number }}"
                                class="prev">上一页</a>
                           {% else %}
                             <a href="{% url 'news:search' %}?page={{ page.previous_page_number }}" class="prev">上一页</a>
                           {% endif %}
                         {% endif %}
                         {# 列出所有的URL地址 #}
                         {% for num in page.paginator.page_range|slice:":10" %}
                           {% if num == page.number %}
                             <span class="sel">{{ page.number }}</span>
                           {% else %}
                             {% if query %}
                               <a href="{% url 'news:search' %}?q={{ query }}&amp;page={{ num }}"
                                  target="_self">{{ num }}</a>
                             {% else %}
                               <a href="{% url 'news:search' %}?page={{ num }}" target="_self">{{ num }}</a>
                             {% endif %}
                           {% endif %}
                         {% endfor %}

                        {# 如果页数大于10，则打两点 #}
                         {% if page.paginator.num_pages > 10 %}
                           ..

                           {% if query %}
                             <a href="{% url 'news:search' %}?q={{ query }}&amp;page={{ page.paginator.num_pages }}"
                                target="_self">{{ page.paginator.num_pages }}</a>
                           {% else %}
                             <a href="{% url 'news:search' %}?page={{ page.paginator.num_pages }}"
                                target="_self">{{ page.paginator.num_pages }}</a>
                           {% endif %}

                         {% endif %}

                         {# 下一页的URL地址 #}
                         {% if page.has_next %}
                           {% if query %}
                             <a href="{% url 'news:search' %}?q={{ query }}&amp;page={{ page.next_page_number }}"
                                class="next">下一页</a>
                           {% else %}
                             <a href="{% url 'news:search' %}?page={{ page.next_page_number }}" class="next">下一页</a>
                           {% endif %}
                         {% endif %}
                       </div>
                     </div>

                       <!-- news-contain end -->

                   </div>
                   <!-- content end -->
               </div>
               <!-- main-contain  end -->
               <!-- side start -->
               <aside class="side">
                   <div class="side-activities">
                       <h3 class="activities-title">在线课堂<a href="javascript:void(0)">更多</a></h3>
                       <div class="activities-img">
                           <a href="javascript:void(0);" target="_blank">
                               <img src="https://res.shiguangkey.com//file/201804/26/20180426142628123364782.jpg"
                                    alt="title">
                           </a>
                           <p class="activities-tips">对话国外小姐姐</p>
                       </div>
                       <ul class="activities-list">
                           <li>
                               <a href="javascript:void(0);" target="_blank">
                                   <span class="active-status active-start">报名中</span>
                                   <span class="active-title"><a href="https://www.shiguangkey.com/course/2432"> Django 项目班</a></span>
                               </a>
                           </li>
                           <li>
                               <a href="javascript:void(0);" target="_blank">
                                   <span class="active-status active-end">已结束</span>
                                   <span class="active-title"><a href="https://www.shiguangkey.com/course/2321">Python入门基础班</a></span>
                               </a>
                           </li>
                       </ul>
                   </div>
                   <div class="side-attention clearfix">
                       <h3 class="attention-title">关注我</h3>
                       <ul class="side-attention-address">
                           <li>
                               <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-GitHub"></i>Youkou</a>
                           </li>
                           <li>
                               <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu"
                                                                                style="color:rgb(0, 108, 226);"></i>Youkou</a>
                           </li>
                           <li>
                               <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo"
                                                                                style="color:rgb(245,93,99)"></i>Youkou</a>
                           </li>
                       </ul>
                       <div class="side-attention-qr">
                           <p>扫码关注</p>
                       </div>
                   </div>


               </aside>
               <!-- side end -->


           </div>
       </main>
{% endblock %}
{% block script %}
  <script src="../../static/js/index.js"></script>
{% endblock %}